<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const page = ref(1)
const menuOptions = inject('menu') as any
// 获取首页 分类id = menuOptions[0].id  新闻列表

const currentInfo = computed(() => menuOptions.find((item: any) => item.categoryId === route.query.categoryId))

const activeCategoryId = computed(() => route.query.childCategoryId || currentInfo.value.children[0]?.categoryId || currentInfo.value.categoryId)


const { data } = await useAsyncData('news', () => useApiFetch(`/app/articleCategory/pagearticle/${activeCategoryId.value}?pageNum=${page.value}&pageSize=10`), {
  watch: [page, activeCategoryId],
})

const newsList = computed(() => data.value?.data?.rows ?? [])

const total = computed(() => data.value?.data?.total ?? 0)

const getChildCategoryName = (parent: any, id: string) => {
  const child = parent.children.find((item: any) => item.categoryId === id)
  return child?.categoryName || parent.categoryName
}

const switchTo = (categoryId: string) => {
  router.push({
    query: {
      ...route.query,
      childCategoryId: categoryId,
    },
  })
}
</script>

<template>
  <main>
    <div class="banner-container" />
    <section class="flex w-[1200px] justify-between mx-auto pb-[50px]">
      <div class="right-container">
        <div class="news-container">
          <div class="pt-[8px] px-[20px] text-white">
            <h3 class="text-[20px]">
              {{ currentInfo.categoryName }}
            </h3>
            <small class="text-[14px] text-[#ffcaca]">{{ currentInfo.categoryTitle }}</small>
          </div>
          <ul v-if="currentInfo.children.length" class="px-[12px] text-[#4c4c4c] leading-[20px] py-[12px] text-center text-[16px]">
            <li
              v-for="i in currentInfo.children" :key="i.categoryId"
              class="h-[42px] leading-[42px]  border-[#e6e6e6] border-b last:border-none cursor-pointer hover:text-[#c00]"
              :class="{ 'text-[#c00]': activeCategoryId === i.categoryId }"
              @click="switchTo(i.categoryId)"
            >
              {{ i.categoryName }}
            </li>
          </ul>
        </div>
      </div>
      <div class="w-[915px] mt-[40px]">
        <n-tabs type="line">
          <n-tab name="幸福">
            {{ getChildCategoryName(currentInfo, activeCategoryId)}}
          </n-tab>
          <template #suffix>
            <div class="flex items-center mt-[10px] text-[12px] text-[#808080]">
              <UnoIcon class="i-carbon:home" />
              <span>首页</span>
              <UnoIcon class="i-carbon:chevron-right" />
              <span>{{ currentInfo.categoryName }}</span>
              <UnoIcon class="i-carbon:chevron-right" />
              <span>{{ getChildCategoryName(currentInfo, activeCategoryId) }}</span>
            </div>
          </template>
        </n-tabs>
        <div class="pt-[30px]">
          <ul class="list1">
            <li v-for="item in newsList" :key="item.id">
              <NuxtLink :to="`/news/${item.id}?categoryId=${item.parentCategoryId}&currentCategoryId=${item.categoryId}`">
                <h3>
                  <!-- 禁止斜体 -->
                  <strong class="ellipsis !font-normal">{{ item.title }}</strong>
                  <span>{{ item.publishTime }}</span>
                </h3>
                <div class="conBox clearfix">
                  <img v-if="item.urlList?.[0]?.url" :src="item.urlList?.[0]?.url" class="fl">
                  <p class="p1 n2ellipsis">
                    {{ item.summary }}
                  </p>
                </div>
              </NuxtLink>
            </li>
          </ul>
          <div class="flex justify-end pt-[10px]">
            <n-pagination v-model:page="page" :page-size="10" :item-count="total" />
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<style scoped>
.banner-container {
  width: 100%;
  height: 355px;
  background: url("http://jmrh.dumi.info/templates/main/uploadfile/image/init/banner5.jpg") no-repeat center center;
  background-size: auto 100%;
  border-bottom: 4px solid #c00;
}

.right-container {
  width: 250px;
  margin-top: 30px;
}

.right-container .news-container,
.right-container .project-container {
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(111, 111, 111, .2);
}

.right-container .news-container {
  background: url('http://jmrh.dumi.info/templates/main/images/bg_kuai1.png') no-repeat center top;
}

::v-deep(.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-nav-scroll-content),
::v-deep(.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-nav__suffix) {
  border-bottom: 2px solid #ccc;
}

::v-deep(.n-tabs .n-tabs-tab) {
  font-size: 32px;
  color: #4c4c4c
}

::v-deep(.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active) {
  color: #4c4c4c;
  font-weight: bold;
}

.list1 li {
  margin-bottom: 20px;
}

.list1 li a {
  display: block;
  padding: 15px 10px;
  background: #f2f2f2;
}

.list1 li h3 {
  line-height: 1em;
  font-size: 20px;
}

.list1 li h3 strong {
  display: inline-block;
  max-width: 80%;
}

.list1 li h3 span {
  position: relative;
  top: -2px;
  left: 5px;
  font-size: 12px;
  font-family: arial;
  color: #808080;
}

.list1 li .conBox {
  margin-top: 10px;
}

.list1 li .conBox img {
  width: 119px;
  height: 80px;
  margin-right: 10px;
}

.list1 li .conBox .p1 {
  line-height: 24px;
  max-height: 72px;
  color: #808080;
}

.list1 li:hover a {
  background: #c00;
  color: #fff;
}

.list1 li:hover h3 span {
  color: #fff;
}

.list1 li:hover .conBox .p1 {
  color: #c0ebd7;
}
</style>
